<div class="d-flex align-items-center p-title bg-light">
    <div class="col"><i class="fa fa-hand-o-right"></i>&nbsp;&nbsp;{{getmenuActiveName}}</div>
    <ng-container *ngIf="menuActiveIndex == 4">
      <div class="pr-3 text-secondary" [ngClass]="{'text-success': menu.intervalId !== null}">当前时间为：{{menu.nowTime | date: 'yyyy-MM-dd HH:mm:ss'}}</div>
      <div class="btns pr-5">
        <button type="button" class="btn btn-sm btn-outline-secondary" [disabled]="menu.intervalId !== null" (click)="menu.startTimer()"><i class="fa fa-play fa-fw"></i></button>
        <button type="button" class="btn btn-sm btn-outline-secondary" [disabled]="menu.intervalId === null" (click)="menu.stopTimer()"><i class="fa fa-stop fa-fw"></i></button>
      </div>
    </ng-container>
    
    
    <div class="btns">
      <button type="button" class="btn btn-sm btn-outline-secondary" (click)="goToMenu('prev')"><i class="fa fa-angle-left fa-fw"></i>上一页</button>
      <button type="button" class="btn btn-sm btn-outline-secondary" (click)="goToMenu('next')"><i class="fa fa-angle-right fa-fw"></i>上一页</button>
    </div>
</div>

<div class="lesson4 d-flex">
  <div class="col">
    <router-outlet></router-outlet>
    <!-- <ng-container [ngSwitch]="menuActiveIndex">
      <app-lesson4-one *ngSwitchCase="0"></app-lesson4-one>
      <app-lesson4-two *ngSwitchCase="1"></app-lesson4-two>
      <app-lesson4-three *ngSwitchCase="2"></app-lesson4-three>
      <app-lesson4-four *ngSwitchCase="3"></app-lesson4-four>
      <app-lesson4-five *ngSwitchCase="4"></app-lesson4-five>
      <app-lesson4-six *ngSwitchCase="5"></app-lesson4-six>
      <app-lesson4-seven *ngSwitchCase="6"></app-lesson4-seven>
    </ng-container> -->
  </div>
  <div>
    <app-lesson4-menu #menu [title]="menuTitle" [data]="menuData" [menuActiveIndex]="menuActiveIndex" (changes)="changeMenu($event)"></app-lesson4-menu>
    <hr />
    <div class="alert alert-primary mt-4" *ngIf="menuActiveIndex == 6">
      <div class="form-group">
        <label for="formGroupExampleInput">菜单高亮样式切换</label>
        <select (change)="changeMenuHeightColor($event.target.value)" class="form-control">
          <option>primary</option>
          <option>secondary</option>
          <option>success</option>
          <option>danger</option>
          <option>warning</option>
          <option>info</option>
          <option>light</option>
          <option>dark</option>
        </select>
      </div>
    </div>
  </div>
</div>